*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  /* position: fixed;
  top: 450px;
  left: 10px; */
  width: 180px;
  height: 180px;
  /* background-color: #2b2b2b; */
  display: flex;
  z-index: 999;
}
.cloud {
  width: 150px;
  height: 40px;
  margin: auto;
  position: relative;
  border-radius: 50px;
  background-color: #b0aaaa;
}
.cloud::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 10px;
  background: #b0aaaa;
  border-radius: 50%;
  position: absolute;
  bottom: -150px;
}
.clouds {
  width: 50px;
  height: 50px;
  background: #b0aaaa;
  border-radius: 50%;
  position: absolute;
  top: -32px;
  left: 27px;
}
.clouds::after{
  position: absolute;
  content: "";
  width: 65px;
  height: 65px;
  background: #b0aaaa;
  border-radius: 50%;
  position: absolute;
  left: 35px;
  top: -9px;
}
.rain {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
.rain span {
  width: 5px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  margin: 0 5px;
  animation: aninate linear 2s infinite;
  animation-duration: calc(var(--i) * 2s);
}

@keyframes aninate {
  0%{
    transform: translateY(0) scale(0);
  }
  100%{
    transform: translateY(150px) scale(1);
  }
}